<template>
  <n-config-provider id="body w-full" :theme-overrides="naiveTheme"
                     style="min-width: 1100px;"
  >
    <module-header name="app" value="/manage/job" is-telescreen />

    <main-content>
      岗位名称<n-input round placeholder="请输入名称" style="width: 300px;">
        <template #suffix>
          <n-icon :component="Search" />
        </template>
      </n-input>
      <n-button type="primary" style="margin-left: 500px;" @click="isShowCreateJobList=true">
        创建岗位
      </n-button>
      <n-data-table :columns="columns" :data="data" />
      <n-form-modal v-model:show="isShowCreateJobList" title="创建岗位" :fields="createJobList"
                    :on-confirm="onCreateJobConfirm"
      />
      <n-form-modal v-model:show="isShowUpdateJobList" title="修改岗位" :fields="updateJobList"
                    :on-confirm="onUpdateJobConfirm"
      />
      <n-modal v-model:show="showDelModal"
               preset="dialog"
               title="确认"
               content="确认删除?"
               positive-text="确认"
               negative-text="算了"
               @positive-click="showDelModal = false"
               @negative-click="showDelModal = false"
      />
    </main-content>
  </n-config-provider>
</template>

<script lang="ts" setup>
import { Search } from '@vicons/ionicons5'

import { ref, h, reactive } from 'vue'
import { naiveTheme } from '../../shared/theme/naive_theme'
import { NConfigProvider, NIcon, NInput, NButton, NDataTable, NModal } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import { nav } from '../../shared/client/window'
import { axiosReq } from '../../shared/client/axios'
import { actErr } from '../../shared/client/interact'
import ModuleHeader from '../../components/common/module_header.vue'
import MainContent from '../../components/common/main_content.vue'
import NFormModal, { Item as FormModalItem } from '../../components/naive/n_form_modal.vue'

type RowData = {
  key: number
  name: string
  department: string
  // address: string
  id:number
  creator:string
  time:string
  more:string
}

const buttons = [{ label:'修改',func:update }, { label:'删除',func:update }]

const columns = [
  {
    title: '岗位编号',
    key: 'id'
  },
  {
    title: '岗位名',
    key: 'name'
  },
  {
    title: '所属部门',
    key: 'department'
  },
  {
    title: '创建人',
    key: 'creator'
  },
  {
    title: '创建时间',
    key: 'time'
  },
  {
    title: '操作',
    key: 'operate',
    render (row) {
      return buttons.map((item, index) => (
        h(
          NButton,
          {
            size: 'small',
            key: index, // 添加唯一的 key，通常使用数组索引作为 key
            onClick: () => item.func(event,row)
          },
          { default: () => item.label },
        )
      ))
    }
  }
]
const data = [
  {
    key: 0,
    id:1,
    name: '07akioni',
    department:'部门1',
    creator:'管理员',
    time:'2023-02-16',
  },
  {
    key: 1,
    id:2,
    name: '07akioni',
    department:'部门2',
    creator:'管理员',
    time:'2023-02-16',
  },
  {
    key: 2,
    id:3,
    name: '07akioni',
    department:'部门3',
    creator:'管理员',
    time:'2023-02-16',
  },
]

//是否展示新增岗位表单
const isShowCreateJobList = ref(false)

//定义新增岗位表单
const createJobList: FormModalItem[] = [{
  title: '岗位名',
  placeholder: '请输入',
  type: 'input',
  key: 'name'
}, {
  title: '所属部门',
  placeholder: '请选择',
  type: 'select',
  key: 'department',
  options: [
    { label: '部门1', value: '1' },
    { label: '部门2', value: '2' },
    { label: '部门3', value: '3' },
  ]
}]
//确认提交新增岗位表单
async function onCreateJobConfirm(form: any) {
  console.log(form)
}

const showDelModal = ref(false)

//是否展示更新岗位表单
const isShowUpdateJobList = ref(false)

//定义更新岗位表单
const updateJobList: FormModalItem[] = reactive([{
  title: '岗位名',
  placeholder: '请输入',
  type: 'input',
  key: 'name',
}, {
  title: '所属部门',
  placeholder: '请选择',
  type: 'select',
  key: 'department',
  options: [
    { label: '部门1', value: '1' },
    { label: '部门2', value: '2' },
    { label: '部门3', value: '3' },
  ]
}])

//确认提交修改用户表单
async function onUpdateJobConfirm(form: any) {
  console.log(form)
}

//更新信息
function update(event,data) {
  if (event.target.innerText === '修改') {
    updateJobList[0].value = data.name
    updateJobList[1].value = data.department
    isShowUpdateJobList.value = true
  } else if(event.target.innerText === '删除') {
    showDelModal.value = true
  }
}
</script>


<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style>
